<template>
  <view :class="theme">
    <view class="fixed left-[var(--window-left)] right-[var(--window-right)] top-0 bottom-0">
      <uv-image width="100%" height="100%" src="/static/img/2/9.png" />
    </view>

    <view class="items-center relative pt-[calc(var(--window-top)+var(--status-bar-height))]"
      style="margin: 150rpx 20rpx 30rpx 66rpx;">
      <uv-image width="666" height="836" src="/static/img/transform/1.png" />

      <view class="absolute bottom-40 items-center mr-40">
        <button v-if="formData.active" @click="activeCard" hover-class="op-[0.6]"
          class="items-center justify-center bg-primary lh-[3] color-base text-28 fw-700 b-rounded-20 w-250">
          立即激活
        </button>
        <block v-else>
          <text class="color-primary lh-[3] text-30 fw-bold">
            卡片数量: {{ serverInfo.nft_num }}
          </text>
          <button @click="changePopup(true, 'transform')" hover-class="op-[0.6]"
            class="items-center justify-center bg-primary lh-[3] color-base text-28 fw-700 b-rounded-20 w-250">
            立即转赠
          </button>
        </block>
      </view>
    </view>

    <view class="m-50 z-1">
      <view v-for="(item, index) in serverInfo.list || []" @click="beforeSubmit(index)" :key="index"
        class="mb-30 bg-primary b-rounded-16 flex-row color-base justify-between items-center p-36"
        style="box-shadow: 0 0 20rpx 0 rgba(0,0,0,0.1);">
        <text class="text-32 fw-600 mr-24">{{ item.name || "-" }} *{{ item.num || 0 }}</text>
        <text class="flex-1 text-50 fw-700 text-right">{{ item.price || 0 }}</text>

        <label class="ml-24">
          <text>购买</text>
          <uv-icon size="30" color="#fff" name="arrow-right" />
        </label>
      </view>
    </view>

    <uv-popup :ref="(e: AnyObject) => (showPopup.transform = e)" mode="center" closeable :closeOnClickOverlay="false"
      closeIconColor="#fff" :overlay-style="{ backdropFilter: `blur(10rpx)` }">
      <view class="bg-[rgba(41,43,43,0.9)] b-rounded-36 w-500">
        <view style="padding: 50rpx 30rpx 0;">
          <text class="text-32 color-18 fw-700 text-center">卡片转赠</text>
          <input v-model="formData.target" maxlength="11"
            class="mt-30 overflow-hidden h-88 pl-20 pr-20 b-rounded-16 text-28 bg-section color-base text-center"
            type="number" placeholder="请输入对方手机号或ID" placeholder-class="color-placeholder">
          <input v-model="formData.number" maxlength="11"
            class="mt-30 overflow-hidden h-88 pl-20 pr-20 b-rounded-16 text-28 bg-section color-base text-center"
            type="number" placeholder="请输入转赠数量" placeholder-class="color-placeholder">
          <input v-model="formData.password" maxlength="6"
            class="mt-24 overflow-hidden h-88 pl-20 pr-20 b-rounded-16 text-28 bg-section color-base text-center"
            type="password" placeholder="请输入交易密码" placeholder-class="color-placeholder">
        </view>

        <button @click="transform" hover-class="op-60"
          class="bg-primary color-base text-30 b-rounded-16 border-none m-30 fw-600 !border-none lh-88" plain>
          提交
        </button>
      </view>
    </uv-popup>


    <uv-popup :ref="(e: AnyObject) => (showPopup.buy = e)" mode="center" closeable :closeOnClickOverlay="false"
      closeIconColor="#fff" :overlay-style="{ backdropFilter: `blur(10rpx)` }">
      <view class="bg-[rgba(41,43,43,0.9)] b-rounded-36 w-500">
        <view style="padding: 50rpx 30rpx 0;">
          <text class="text-32 color-18 fw-700 text-center">购买龙闪卡</text>
          <input v-model="formData.number" maxlength="11"
            class="mt-30 overflow-hidden h-88 pl-20 pr-20 b-rounded-16 text-28 bg-section color-base text-center"
            type="number" placeholder="请输入购买数量" placeholder-class="color-placeholder">
          <input v-model="formData.password" maxlength="6"
            class="mt-24 overflow-hidden h-88 pl-20 pr-20 b-rounded-16 text-28 bg-section color-base text-center"
            type="password" placeholder="请输入交易密码" placeholder-class="color-placeholder">
        </view>

        <button @click="buy" hover-class="op-60"
          class="bg-primary color-base text-30 b-rounded-16 border-none m-30 fw-600 !border-none lh-88" plain>
          提交
        </button>
      </view>
    </uv-popup>
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { sleep, uniNavigator } from "@/common/libs/utils";
import { onLoad, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";

const { theme } = useMapState(["theme"]);
const showPopup = reactive({
  transform: {} as AnyObject,
  buy: {} as AnyObject,
});

const serverInfo = ref<AnyObject>({});

const formData = reactive({
  password: "",
  number: "",
  target: "",

  currentCardIndex: 0,
  active: 0
});

const changePopup = (e: boolean, popupKey: keyof typeof showPopup) => {
  showPopup[popupKey][e ? "open" : "close"]();
};

onNavigationBarButtonTap(() => {
  uniNavigator({ url: "/pages/client/main/bill-transfer?type=1" })
});

onLoad(({ active = 0 }: any) => {
  formData.active = +active;
  getServerInfo();
});

onPageScroll((e) => {
  uni.setNavigationBarColor({
    frontColor: "#ffffff",
    backgroundColor: e.scrollTop > 30 ? " rgba(34, 25, 22, 1)" : "rgba(34, 25, 22, 0.1)"
  })
});

const getServerInfo = () => {
  uni.showToast({ icon: "loading", mask: true, duration: 3000 });
  uni.request({
    url: "/serverInfo",
    success({ data }: AnyObject) {
      uni.hideToast();
      serverInfo.value = data || {};
    }
  });
}

const transform = () => {
  changePopup(false, "transform");

  uni.request({
    url: "/nftGoodsGive",
    data: {
      type: 1,
      num: formData.number,
      mobile: formData.target,
      pay_pass: formData.password
    },
    success({ msg: title }: AnyObject) {
      uni.showToast({ title });
      getServerInfo();
    }
  });

  Object.assign(formData, {
    password: "",
    number: "",
    target: "",
  });
}


const beforeSubmit = (index: number) => {
  formData.currentCardIndex = index;
  changePopup(true, 'buy')
}

const buy = () => {
  changePopup(false, 'buy');
  uni.request({
    url: "/paymentInfo",
    data: {
      channel: 3,
      order_type: 5,
      goods_id: serverInfo.value.list[formData.currentCardIndex]?.id,
      pay_pass: formData.password,
      num: formData.number
    },
    async success({ msg: title }: any) {
      uni.showToast({ title, duration: 1200 });
      await sleep(1.2);
      getServerInfo();
    }
  });

  Object.assign(formData, {
    password: "",
    number: "",
    currentCardIndex: 0,
  });
}

const activeCard = () => {
  uni.request({
    url: "/nftSelectBonusGoods",
    success({ msg: title }: any) {
      uni.showToast({ title });
    }
  });
}

</script>

<style lang="scss" scoped>
// scss
</style>